<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
			<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			
			.mui-content {
				margin-top: 100px;
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
			}
			
			.diylabel input {
				color: #ababab;
				display: inline-block;
				width: 60%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				font-size: 14px;
			}
			
			.diylabel font {
				display: inline-block;
				width: 85px;
				text-align: left;
				font-size: 15px;
			}
			
			.model {
				text-align: center;
			}
			
			.mui-input {
				text-align: center;
			}
			
			.seach-user {
				width: 78%;
				text-align: center;
				color: #ffffff;
				display: inline-block;
				margin: 30px auto;
				background: #00af66;
				border-radius: 45px;
				line-height: 45px;
				height: 45px;
				margin-left: 11%;
			}
				.tabbar{width:100%;height: 60px;line-height: 60px;margin-bottom: 10px;} 
			.tabbar span{
				display: inline-block;
				width: 48%;
				text-align: center;
			}
			.type-active{border-bottom: 2px solid #00af66;}
		</style>


	</head>

	<body>

		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;width:200px;height:200px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">订销单</h3>
		</div>
		
		<div class="mui-content" id="dxdan">
			<div style="text-align: center;padding-top: 15px;width: 100%;margin: 0 auto;">
			<img  src="../img/buy.svg" style="width: 50%;"/>	
           </div>
			<form id="form">
				
						<div class="tabbar">
					<span @click="switchFormType(0)"  v-bind:class="{'type-active': type==0 }">预定单</span>
					<span @click="switchFormType(1)" v-bind:class="{'type-active': type==1 }">销售单</span>
				</div>
				
		<!--		<div class="model">
					<label class="diylabel">
					<font>订销类型</font>
		    		<input id="typePicker" type="text" class="mui-input" placeholder="订销单类型" readonly="true">
					</label>
				</div>-->
				
				<div class="model">
					<label class="diylabel">
					<font>户主姓名</font>
		    		<input type="text" class="mui-input" :value="fammerName" readonly="true" />
					</label>
				</div>
				
				<div class="model">
					<label class="diylabel">
					<font>产品信息</font>
		    		<input id="infoPicker" v-model="desName" type="text" class="mui-input" placeholder="点击选择产品" readonly="true">
					</label>
				</div>
				
				<div class="model">
					<label class="diylabel">
					<font>下单日期</font>
		    		<input id='pickDateBtn' v-model="dxdate" type="text" class="mui-input" placeholder="请选择下单日期" readonly="true">
					</label>
				</div>
				
					<div class="model">
					<label class="diylabel">
					<font>价格</font>
		    		<input v-model="price" pattern="\d*" type="text" class="mui-input" placeholder="请填写订销单价格(元)">
					</label>
				</div>
				
				<div class="model">
					<label class="diylabel">
					<font>数量</font>
		    		<input v-model="count" type="text" class="mui-input" placeholder="请填写收购量">
					</label>
				</div>
				
				
				<div class="model">
					<label class="diylabel">
					<font>{{type==0?'预定企业':'收购企业'}}</font>
		    		<input v-model="companyName" type="text" class="mui-input" placeholder="(选填)">
					</label>
				</div>
				
				
									<div class="model">
					<label class="diylabel">
					<font>{{type==0?'预定人姓名':'购买人姓名'}}</font>
		    		<input type="text" class="mui-input" placeholder="(必填)" v-model="buyname">
					</label>
				</div>
				
				
									<div class="model">
					<label class="diylabel">
					<font>联系方式</font>
		    		<input type="text" class="mui-input" placeholder="(必填)" v-model="buycontact">
					</label>
				</div>
						
				<!--
				<div class="mui-input-row">
					<label>类型</label>
					<input id="typePicker" type="text" class="mui-input-clear" placeholder="订销单类型" readonly="true" value="预定单" />
				</div>
				<div class="mui-input-row">
					<label>户主</label>
					<input type="text" class="mui-input-clear" :value="fammerName" readonly="true" />
				</div>
				<div class="mui-input-row">
					<label>产品信息</label>
					<input id="infoPicker" v-model="desName" type="text" class="mui-input" placeholder="点击选择产品" readonly="true">
				</div>
				<div class="mui-input-row">
					<label>下单日期</label>
					<input id='pickDateBtn' v-model="dxdate" type="text" class="mui-input" placeholder="请选择下单日期" readonly="true">
				</div>

				<div class="mui-input-row">
					<label>收购价格</label>
					<input v-model="price" pattern="\d*" type="text" class="mui-input-clear" placeholder="请填写订销单价格(元)">
				</div>
				<div class="mui-input-row">
					<label>收购数量</label>
					<input v-model="count" type="text" class="mui-input-clear" placeholder="请填写收购量">
				</div>
				<div class="mui-input-row">
					<label>{{type==0?'预定企业':'收购企业'}}</label>
					<input v-model="companyName" type="text" class="mui-input-clear" placeholder="(选填)">
				</div>
				<div class="mui-input-row">
					<label>{{type==0?'预定人姓名':'购买人姓名'}}</label>
					<input type="text" class="mui-input-clear" placeholder="(必填)" v-model="buyname">
				</div>

				<div class="mui-input-row">
					<label>联系方式</label>
					<input type="text" class="mui-input-clear" placeholder="(必填)" v-model="buycontact">
				</div>-->

			</form>
			<a @click="saveDxdan" href="javascript:void(0);" class="seach-user">提交</a>
			<!--<button @click="saveDxdan" type="button" class="mui-btn mui-btn-primary" style="margin-top: 20px;	width: 90%;height: 46px;left: 50%;margin-bottom: 20px;-webkit-transform: translate(-50%);">提交</button>-->
		</div>

		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/mui.picker.js"></script>
		<script src="../js/resource/mui.poppicker.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/dxdanForm.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//时间选择器	
					doc.getElementById("pickDateBtn").addEventListener('tap', function() {
						var dDate = new Date();

						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							dxdan.dxdate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
						}, function(e) {}, {
							title: "请选择日期",
							date: dDate,
						});
					})
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};

					axios({
						method: 'POST',
						url: sever + '/infojson',
						params: {
							id: localStorage.fammerid
						},
						responseType: 'json',
					}).then(function(res) { 
						var infoPicker = new $.PopPicker();
						infoPicker.setData(res.data.data);
						var infoPickerButton = doc.getElementById('infoPicker');

						infoPickerButton.addEventListener('tap', function(event) {
							infoPicker.show(function(items) {
								dxdan.des = _getParam(items[0], 'value')
								dxdan.desName = _getParam(items[0], 'text')
							});
						}, false);
					})

					axios({
						method: 'POST',
						url: sever + '/areajson',
						params: {},
						responseType: 'json',
					}).then(function(result) {
						area = result.data.data

					/*	var typePicker = new $.PopPicker();
						typePicker.setData([{
							value: '0',
							text: '预订单'
						}, {
							value: '1',
							text: '销售单'
						}]);
						var typePickerButton = doc.getElementById('typePicker');

						typePicker.show(function(items) {
							typePickerButton.value = _getParam(items[0], 'text')
							dxdan.type = _getParam(items[0], 'value')
						});

						typePickerButton.addEventListener('tap', function(event) {
							typePicker.show(function(items) {
								typePickerButton.value = _getParam(items[0], 'text')
								dxdan.type = _getParam(items[0], 'value')
							});
						}, false);*/

						//-----------------------------------------
						//					//级联示例
						var cityPicker3 = new $.PopPicker({
							layer: 4
						});
						cityPicker3.setData(area);
						var showCityPickerButton = doc.getElementById('showCityPicker3');

						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								dxdan.companyArea.push(_getParam(items[0], 'value'))
								dxdan.companyArea.push(_getParam(items[1], 'value'))
								dxdan.companyArea.push(_getParam(items[2], 'value'))
								dxdan.companyArea.push(_getParam(items[3], 'value'))
								showCityPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text') + " " + _getParam(items[3], 'text')
							});
						}, false);
					})

				});
			})(mui, document);
		</script>
	</body>

</html>